<template>
    <div class="page-container">
        <div class="header">待发布新闻 （{{ getNewsCount() }}）</div>
        <div class="content">
            <p v-if="showEmptyMessage && getNewsCount() === 0">暂无待发布新闻,请先到左侧选择待发布新闻</p>
            <ReleaseItem v-else :dataList="releaseList" @remove="handleRemove" :showArrows="showArrows"></ReleaseItem>
        </div>
        <div class="footer" v-if="showPublishButton">
            <el-button class="w-full" type="primary" @click="router.push('/PressRelease')">发布新闻</el-button>
        </div>
    </div>
</template>
<script setup>
import ReleaseItem from '@/page/ReleaseItem.vue'
import { updateNews } from '../api/newsApi'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { onMounted, ref } from 'vue'
import { getReleaseList,orderNews } from '../api/newsApi'
import { classModelList } from '@/enums/index'

// 定义事件
const emit = defineEmits(['data-loaded'])

// 定义 props
const props = defineProps({
    showPublishButton: {
        type: Boolean,
        default: true
    },
    showArrows: {
        type: Boolean,
        default: false
    },
    showEmptyMessage: {
        type: Boolean,
        default: true
    }
})

const router = useRouter()
const releaseList = ref([])

// 计算新闻总数
const getNewsCount = () => {
    if (!releaseList.value || !Array.isArray(releaseList.value)) return 0
    return releaseList.value.reduce((total, category) => {
        return total + (category.list && Array.isArray(category.list) ? category.list.length : 0)
    }, 0)
}

const handleRemove = async (id) => {
    const res = await updateNews({ id: id, isSelect: 0 })
    console.log(res.code)
    if (res.code === 200) {
        ElMessage.success('删除成功')
        // 遍历所有分类，找到并删除指定id的新闻项
        releaseList.value = releaseList.value.map(category => {
            return {
                ...category,
                list: category.list.filter(item => item.id !== id)
            }
        })
    }
}



const refresh = async () => {
    const res = await getReleaseList()
    releaseList.value = sortRelease(res.data.list)
}

/**
 * 对发布列表进行排序的函数
 * @param {Array} list - 需要排序的发布列表
 * @returns {Array} 返回排序后的列表
 */
const sortRelease = (list) => {
    const sorted =  classModelList.map(cat => {
        return {
            id: cat.value,
            title: cat.label,
            list: list.filter(item => item.classReal === cat.value).sort((a, b) => a.orderNews - b.orderNews)
        }
    })
    console.log(sorted)
    return sorted    // 返回原始列表（当前实现未进行实际排序）
}



onMounted(async () => {
    const res = await getReleaseList()
    releaseList.value = sortRelease(res.data.list)
    // 触发事件，将数据传递给父组件
    emit('data-loaded', res.data.list)
})

defineExpose({
    releaseList,
    refresh
})

</script>
<style scoped>
.page-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.header {
    padding: 16px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 16px;
}

.content {
    flex: 1;
    overflow: hidden;
    height: 100vh;
    /* 关键：让flex子元素计算高度 */
}

.content p {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    color: #909399;
}
</style>
